<template>
  <!-- 个人中心页面 -->
  <div id="UserFriendly">
    <div class="header">
      <div class="header_p">
        <div>
          <img src="../assets/头像男 拷贝 4.png" alt="" />
        </div>
        <p>{{Userdata.remark}}</p>
        <ul>
          <li>姓名:{{Userdata.nickName}}</li>
          <li>联系方式{{Userdata.phone}}</li>
        </ul>
      </div>
    </div>
    <div class="header-m">
      <ul>
        <li v-for="(item, index) in Person" :key="index" @click="geren(item.name)">
          <span>
            <img :src="item.img" alt="" />
            {{ item.name }}
          </span>
          <span>
            <img src="../assets/jiantou.png" alt="" />
          </span>
        </li>
      </ul>
    </div>
    <!-- 退出登录 -->
    <div class="delp" @click="tuichu">
        <span>退出登录</span>
    </div>
    <van-dialog v-model="show" title="确定退出登录吗?
" show-cancel-button>
 
</van-dialog>
  </div>
</template>

<script>
import {GetUserlistDate} from "@/request/api"
export default {
  name: "UserFriendly",
  data() {
    return {
      Userdata:null,
       show: false,
      Person: [
        {
          name: "个人信息",
          img: "../assets/Personal information.png ",
        },
        {
          name: "支付中心",
          img: "../assets/形状 2.png ",
        },
        {
          name: "修改密码",
          img: "../assets/change Password.png ",
        },
        {
          name: "版本信息",
          img: "../assets/change Password.png ",
        },
        {
          name: "清除缓存",
          img: "../assets/组 16.png ",
        },
      ],
      
    };
  },
  methods:{
    geren(val){
      if(val=="个人信息"){
           console.log(666);
           this.$router.push("/Gerenxinxi")
      }
    },
    tuichu(){
       this.show=true
      console.log(666);
     
  
    }
  },
  created(){
           GetUserlistDate().then((res)=>{
             this.Userdata=res.data.data
             console.log("个人中心页面",res);
           })
           console.log(66);
  }
};
</script>

<style lang="less" scoped>
#UserFriendly {
  background: #f5f5f5;
  .header-m {
    position: relative;
    padding-top: 1rem;
    width: 3.5rem;
    margin: 0 auto;
   
    ul {
         border-radius: .1rem;
      li {
        display: flex;
        background: #fff;
        font-size: 0.14rem;
        height: 0.5rem;
        justify-content: space-between;
        line-height: 0.5rem;
        padding: 0 0.2rem;
        align-items: center;
        border-bottom: 1px solid #e5e5e5;
}
        span {
          img {
            display: block;
          }
        }
      }
    }
  }
  .header {
    height: 1.74rem;
    background: #1f4ca2;
    position: relative;

    .header_p {
      width: 3.5rem;
      height: 1.5rem;
      background: #ffff;
      /* margin: 0 auto; */
      position: absolute;
      transform: translate(-50%);
      /* left: 1.5rem; */
      margin-left: 50%;
      /* transform: translateX(60%); */
      top: 0.4rem;
      top: 1rem;
      font-size: 0.14rem;
      border-radius: 0.15rem;
      text-align: center;
      ul {
        display: flex;
        position: relative;
        top: -0.2rem;
        padding: 0 0.3rem;

        justify-content: space-between;
        li {
          text-align: left;
        }
      }
      p {
        position: relative;
        top: -32%;
        left: 0.15rem;
        color: #666;
      }
      div {
        position: relative;
        transform: translateX(-50%);
        margin-left: 50%;
        top: -0.6rem;
      }
    }
  }
.delp{
    width: 3.5rem;
    height: .5rem;
    line-height: .5rem;
    font-size: .14rem;
    background: #e9e9e9;
    margin: 0 auto;
    text-align: center;
        margin-top: .2rem;
    margin-bottom: .2rem;
    border-radius: .1rem;
    color: #666;
}
</style>
